<template>
  <div class="login-box">
    <div>
      <div class="box-header">
        <img class="logo" src="../assets/logo.svg" alt=""/>
        <div class="box-header-t">Management</div>
      </div>
      <div class="title">Logistics Management 校园快递管理系统 - 用户登录</div>
      <a-tabs @change="tabClick" default-active-key="1" :tabBarStyle="{ textAlign: 'center' }">
        <a-tab-pane key="1" tab="密码登陆">
          <a-input
              v-model="form.email"
              size="large"
              style="margin-top: 10px"
              class="input"
              placeholder="邮箱">
            <a-icon slot="prefix" type="mail"/>
          </a-input>
          <a-input-password
              v-model="form.password"
              size="large"
              class="input"
              placeholder="密码"
              @keydown.native.enter="submitLogin"
          >
            <a-icon slot="prefix" type="lock"/>
          </a-input-password>
        </a-tab-pane>
        <a-tab-pane key="2" tab="验证码登陆" force-render>
          <a-input
              v-model="form.email"
              size="large"
              style="margin-top: 10px"
              class="input"
              placeholder="邮箱">
            <a-icon slot="prefix" type="mail"/>
          </a-input>
          <div style="display: flex">
            <a-input
                v-model="form.code"
                size="large"
                class="input"
                placeholder="验证码">
              <a-icon slot="prefix" type="safety-certificate"/>
            </a-input>
            <a-button class="code-btn" :loading="sendLoading" @click="sendEmail">
              获取验证码
            </a-button>
          </div>
        </a-tab-pane>
      </a-tabs>
      <div style="margin-bottom: 20px">
        <a-checkbox v-model="form.remember">记住密码</a-checkbox>
      </div>
      <a-button :loading="submitLoading" class="submit-btn" type="primary" @click="submitLogin">
        确认登陆
      </a-button>
      <div class="des">校园快递管理系统 - Copyright 2022 刘璐</div>
    </div>
  </div>
</template>

<script>

export default {
  name: "Login",
  data() {
    return {
      sendLoading: false,
      submitLoading: false,
      submitType: '1', //1账号登录 2邮箱登录
      form: {
        email: '1648892025@qq.com',
        password: '',
        code: '',
        remember: false,
        type: '',
      }
    }
  },
  methods: {
    sendEmail() {
      if (this.checkEmail()) {
        this.sendLoading = true
        this.getRequest('/send-email?email=' + this.form.email).then(resp => {
          this.sendLoading = false
          this.$message.success(resp.message)
        })
      }
    },
    submitLogin() {
      if (this.checkEmail()) {
        this.form.type = this.submitType === '1' ? "password" : "email"
        this.submitLoading = true
        this.postRequest('/login', this.form).then(resp => {
          this.submitLoading = false
          if (resp) {
            console.log(resp)
            const tokenStr = resp.obj.tokenHead + resp.obj.token;
            window.sessionStorage.setItem('tokenStr', tokenStr);
            console.log(tokenStr)
            //跳转首页
            let path = this.$route.query.redirect;
            this.$router.replace((path === '/' || path === undefined) ? '/home' : path);
          }
          else {
            this.submitLoading = false
          }
        })
      }
      else {
        return false
      }
    },
    tabClick(key) {
      this.submitType = key
    },
    checkEmail() {
      const emailRegex = new RegExp('^\\w{3,}(\\.\\w+)*@[A-z0-9]+(\\.[A-z]{2,5}){1,2}$')
      if (!emailRegex.test(this.form.email)) {
        this.$message.error('请输入正确格式的邮箱');
        return false
      } else {
        return true
      }
    },
  }
}
</script>

<style scoped>

body {
  background: #000000 !important;
}

.login-box {
  width: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.box-header {
  display: flex;
}

.box-header-t {
  font-weight: bolder;
  font-size: 30px;
}

.logo {
  width: 44px;
  height: 44px;
  margin-right: 20px;
  margin-left: 43px;
}

.title {
  color: #91949c;
  padding-top: 15px;
  padding-bottom: 35px;
  font-size: 13px;
  text-align: center;
}

.input {
  margin-bottom: 25px;
  font-size: 10px;
}

.code-btn {
  height: 40px;
  margin-left: 30px;
}

.submit-btn {
  letter-spacing: 2px;
  background: #5a84fd;
  width: 100%;
  height: 45px;
}

.des {
  padding-top: 25px;
  font-size: 13px;
  text-align: center;
  color: #91949c;
  letter-spacing: 2px;
}
</style>